<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片:</td>
        <td id="head_td"></td>
    </tr>
    <tr>
        <td>名字:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friend_td"></td>
    </tr>
</table>
<input type="button" value="请求数据" onclick="f()">


<script>



  function f(){
    let person = {
      name:'云先生',age:18,url:"../云先生.png",friend:["香菱","辛焱","行秋"]
    }

    let headTD = document.querySelector("#head_td");
    let img = document.createElement("img");
    img.src = person.url;
    headTD.append(img);

    let nameTD = document.querySelector("#name_td");
    nameTD.innerHTML = person.name;

    let ageTD = document.querySelector("#age_td");
    ageTD.innerHTML = person.age;

    let friendTD = document.querySelector("#friend_td");
    let ul = document.createElement("ul");
    for (const fr of person.friend) {
      let li = document.createElement("li");
      li.innerText = fr;
      ul.append(li);
    }
    friendTD.append(ul)
  }

</script>

</body>
</html>